<route lang="json5" type="page">
{
  style: {
    navigationBarTitleText: '岗位检索',
    navigationStyle: 'custom',
  },
}
</route>
<template>
  <view class="job-search">
    <view class="fixed-bg"></view>
    <view class="job-search__container">
      <SearchInput
        v-model="queryParams.name"
        @focus="visibleMenu = false"
        @blur="visibleMenu = true"
        @confirm="getList"
      />
      <FilterDropMenu
        @confirm="confirmFilter"
        @confirm-location="confirmFilter"
        v-show="visibleMenu"
      />
      <scroll-view
        v-show="visibleMenu"
        class="job-search__container__main"
        scroll-y
        @scrolltolower="loadMore(true)"
      >
        <view class="job-search__container__loading-bar">
          <c-loading text="岗位检索中…" class="loading" v-if="loadType == 'loading'"> </c-loading>
          <view v-else class="total">
            共检索 <text>{{ totalNum }}</text> 个岗位
          </view>
        </view>

        <view class="job-search__container__list">
          <jobCard class="block mb-3" v-for="item in list" :key="item.id" :item="item" />
          <c-load-more
            v-if="['more', 'noMore'].includes(loadType)"
            loadingText="岗位加载中..."
            :loadType="loadType"
          />
          <c-empty v-if="list.length == 0" class="block mt-20" text="暂无相关结果" />
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script lang="ts" setup>
  import FilterDropMenu from './components/filterDropMenu.vue';
  import SearchInput from './components/searchInput.vue';
  import jobCard from '@/pages/components/jobCard.vue';
  import scrollMixin from '@/hooks/scrollMixin';
  import { ApiJobList } from '@/service/job';
  import { useUserStore } from '@/store/user';

  const userStore = useUserStore();
  const { initLoad, loadMore, list, totalNum, loadType } = scrollMixin();

  const visibleMenu = ref(true);

  const queryParams = ref({
    name: '',
    minEducations: '',
    timeRange: '',
    companyNature: '',
    cityName: '',
    proviceName: '',
  });

  const getList = () => {
    if (!userStore.userInfo.isMember) {
      uni.showToast({
        icon: 'none',
        title: `体验次数剩余${userStore.userInfo.searchNum - 1}次`,
      });
      userStore.updateUserInfo({ searchNum: userStore.userInfo.searchNum - 1 });
    }
    initLoad({
      api: ApiJobList,
      params: queryParams.value,
    });
  };
  const confirmFilter = (params) => {
    queryParams.value = {
      ...queryParams.value,
      ...params,
    };
    getList();
  };

  onLoad(({ params }) => {
    if (params) {
      params = JSON.parse(params);
      queryParams.value.name = params.majorName;
      queryParams.value.minEducations = params.minEducation;
    }
    getList();
  });
</script>

<style lang="scss" scoped>
  .job-search {
    height: 100%;
    &__container {
      height: 100%;
      display: flex;
      flex-direction: column;

      &__main {
        flex: 1 0 0;
        height: 100%;
      }

      &__loading-bar {
        background: #ffffff;
        border-radius: 16rpx;
        margin: 0 32rpx;

        padding: 26rpx 0;
        font-size: 28rpx;

        .total {
          display: flex;
          justify-content: center;
          align-items: center;
          gap: 16rpx;
          color: $uni-text-color;
          font-weight: 600;
          text {
            font-family: D-DIN, D-DIN;
            font-weight: bold;
            font-size: 48rpx;
            color: #fd7b1b;
          }
        }
      }

      &__list {
        padding: 32rpx 32rpx;
      }
    }
  }
</style>
